<template>
  <div class="paginationContainer">
    <el-pagination
      v-model:current-page="paginationData.currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10]"
      background
      layout="total,sizes,->,prev,pager,next,jumper"
      :total="paginationData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref, watch, inject, defineEmits } from "vue";
const emit = defineEmits(["tips"]);
const currentPage = ref(1);
const pageSize = ref(10);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

const paginationData =  ref({
  currentPage:1,
  total:10
})

const handleSizeChange = (val) => {

};
const handleCurrentChange = (val) => {
   emit("tips", val);
};
defineExpose({paginationData})
</script>

<style lang="scss" scoped>
.el-pagination {
  height: 56px !important;
  line-height: 56px !important;
}
</style>
